<template>
	<div class="labelInfo">
		<div class="main_content">
			<div class="main_content_title">
				<div class="left">
					<template v-for="(item, index) in $route.meta.title">
						<span v-if="languageId === item.langId">{{ item.name }}</span>
					</template>
				</div>
				<div class="right">
					<template v-for="(btn, index) in buttonList">
						<el-button v-if="btn.perms === 'A'" :key="index + new Date()" type="primary" size="mini" @click="addMenuList">
							<template v-for="title in btn.title">
								<span v-if="languageId === title.langId">{{ title.name }}</span>
							</template>
						</el-button>
						<el-button v-if="btn.perms === 'D'" :key="index + new Date()" type="danger" size="mini" @click="moreDelete">
							<template v-for="(title, index_1) in btn.title">
								<span v-if="languageId === title.langId">{{ title.name }}</span>
							</template>
						</el-button>
					</template>
				</div>
			</div>
			<div class="main_content_con">
				<el-table ref="qtable" v-loading="tableLoading || tableConfigLoading" :data="tableList" tooltip-effect="dark"
					row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" :default-expand-all="false"
					:select-on-indeterminate="true" :border="true" height="100%" @row-click="tableCurrentChange" @select="select"
					@select-all="selectAll" @selection-change="tableSelectionChange" @header-dragend="tableHeaderDragend">
					<el-table-column key="selection" type="selection" :resizable="false" width="50" fixed="left" align="center" />
					<template v-for="(item, headerIndex) in tableConfig">
						<el-table-column v-if="item.show" :key="item.key" :column-key="item.key" :min-width="item.width"
							:resizable="item.resizable" :fixed="item.fixed" :align="item.key === 'name' ? 'left' : 'center'">
							<template slot="header" slot-scope="scope">
								<div class="header_item" v-if="!item.keySort" style="cursor: default;">
									{{ item.label }}
								</div>
								<div class="header_item" v-if="item.keySort"
									@click.stop="getkeySort(item.key, item.keySort, field !== item.keySort ? 0 : order === 0 && keySortFlag ? 1 : order === 1 && keySortFlag ? -1 : 0)">
									{{ item.label }}
									<div class="keySort">
										<i class="el-icon-caret-top" :style="{ color: keySortValue == item.key ? topIconColor : '#c0c4cc' }"
											@click.stop="getkeySort(item.key, item.keySort, 0)" />
										<i class="el-icon-caret-bottom"
											:style="{ color: keySortValue == item.key ? bottomIconColor : '#c0c4cc' }"
											@click.stop="getkeySort(item.key, item.keySort, 1)" />
									</div>
								</div>
							</template>
							<template slot-scope="scope">
								<span v-if="item.key === 'type'" class="blockShape"
									:style="{ 'background': scope.row[item.key] === 0 ? '#67c23a' : scope.row[item.key] === 1 ? '#409eff' : '#e6a23c' }">{{
										scope.row[item.key] === 0 ? $t('text.directory') : scope.row[item.key] === 1 ? $t('text.menu') :
										$t('text.button') }}</span>
								<span v-else-if="item.key === 'isCache' && (scope.row['type'] === 1)"
									:class="[scope.row[item.key] === 1 ? 'validColor' : '']">{{ scope.row[item.key] === 1 ?
										$t('publicBtn.cache')
										: $t('publicBtn.noCache')
									}}</span>
								<span v-else-if="item.key === 'isCache' && (scope.row['type'] !== 1)">/</span>
								<span v-else-if="item.key === 'status'"
									:class="[scope.row[item.key] === 1 ? 'validColor' : 'invalidColor']">{{ scope.row[item.key] === 1 ?
										$t('publicBtn.enable')
										: $t('publicBtn.disable') }}</span>
								<svg-icon v-else-if="item.key === 'icon'" :icon-class="scope.row[item.key] || '/'"
									class-name="disabled" />
								<span v-else>{{ scope.row[item.key] || '-' }}</span>
							</template>
						</el-table-column>
					</template>
					<el-table-column key="setting" width="90" :resizable="false" fixed="right" align="center">
						<template slot="header">
							<div style="display: flex;align-items: center;justify-content: center;">
								{{ $t('publicFormLabel.operate') }}
							</div>
						</template>
						<template slot-scope="scope">
							<div @click.stop>
								<el-dropdown trigger="click" @command="handleCommand($event, scope.row)">
									<span class="el-dropdown-link">
										<img src="@/assets/images/menu_more.svg">
									</span>
									<el-dropdown-menu slot="dropdown">
										<template v-for="(btn, index) in buttonList">
											<span :key="index + new Date()">
												<el-dropdown-item v-if="btn.perms === 'U'" command="edit">
													<template v-for="title in btn.title">
														<span v-if="languageId === title.langId">{{ title.name }}</span>
													</template>
												</el-dropdown-item>
												<!-- 禁用 启用 -->
												<el-dropdown-item v-if="btn.perms === 'U'" command="status">{{ scope.row.status === 1 ?
													$t('publicBtn.disable') : $t('publicBtn.enable')
												}}</el-dropdown-item>
												<el-dropdown-item v-if="btn.perms === 'D'" command="delete">
													<template v-for="title in btn.title">
														<span v-if="languageId === title.langId">{{ title.name }}</span>
													</template>
												</el-dropdown-item>
											</span>
										</template>
									</el-dropdown-menu>
								</el-dropdown>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!-- 设置表头 -->
			<table-config-dialog :visible="showTableConfigDialog" :table-config="tableConfig" @change="tableConfigChange"
				@close="closeTableConfigDialog" />
		</div>
		<!-- 新增表单 -->
		<el-dialog
			:title="propUpType === 'add' ? $t('publicBtn.add') + $t('text.menu') : $t('publicBtn.edit') + $t('text.menu')"
			width="50%" :visible.sync="outerVisible" append-to-body custom-class="add_dialog" @close="closeAddDialog('info')">
			<!-- 语言动态标签页面 -->
			<elTabPane :isShow="isTag" :tagId="tagId" @tagClick="tagClick"></elTabPane>
			<el-form ref="info" :model="info" class="demo-info" size="small">
				<el-form v-for="(info, index) in info.list" :ref="`info${index}`" v-show="tagId === info.langId" :key="index"
					:model="info" :rules="rules" label-width="auto" class="demo-info" size="small">
					<el-form-item :label="$t('formLabel.typesOf')" prop="typesOf">
						<el-radio-group v-model="info.type" :disabled="typeDisabled" @change="getradioType">
							<el-radio label="0">{{ $t('text.directory') }}</el-radio>
							<el-radio label="1">{{ $t('text.menu') }}</el-radio>
							<el-radio label="2">{{ $t('text.button') }}</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item :label="$t('publicFormLabel.name')" prop="name">
						<el-input v-model="info.name" :placeholder="$t('placeholderTip.enter')" />
					</el-form-item>
					<el-form-item :label="$t('formLabel.parentName')">
						<el-input v-model="parentName" placeholder class="input-with-select" @focus="getinnerVisible(info.type)">
							<el-button slot="append" icon="el-icon-search" @click.stop="getinnerVisible(info.type)" />
						</el-input>
					</el-form-item>
					<div v-if="info.type != '2'">
						<el-form-item :label="$t('formLabel.path')" prop="path">
							<el-input v-model="info.path" :placeholder="$t('placeholderTip.enter')"
								@change="copyValue('list', 'path', info.path)" />
						</el-form-item>
						<el-form-item :label="$t('formLabel.component')" prop="component">
							<el-input v-model="info.component"
								:placeholder="$t('placeholderTip.enter') + '(' + $t('text.directory') + ':Layout)'"
								@change="copyValue('list', 'component', info.component)" />
						</el-form-item>
					</div>
					<div v-if="info.type === '0'">
						<el-form-item :label="$t('formLabel.icon')" prop="icon">
							<el-input v-model="info.icon" :placeholder="$t('placeholderTip.enter')"
								@change="copyValue('list', 'icon', info.icon)" />
						</el-form-item>
						<el-form-item :label="$t('formLabel.redirect')" prop="redirect">
							<el-input v-model="info.redirect" :placeholder="$t('placeholderTip.enter')"
								@change="copyValue('list', 'redirect', info.redirect)" />
						</el-form-item>
					</div>
					<div v-if="info.type === '1'">
						<el-form-item :label="$t('formLabel.code')" prop="code">
							<el-input v-model="info.code" :placeholder="$t('placeholderTip.enter')"
								@change="copyValue('list', 'code', info.code)" />
						</el-form-item>
						<el-form-item :label="$t('formLabel.isCache')" prop="isCache">
							<el-switch v-model="info.isCache" :active-value="1" :inactive-value="0"
								@change="copyValue('list', 'isCache', info.isCache)" />
						</el-form-item>
					</div>
					<div v-if="info.type === '2'">
						<el-form-item :label="$t('formLabel.perms')" prop="perms">
							<el-select v-model="info.perms" clearable :placeholder="$t('placeholderTip.pSelect')" style="width:99%"
								@change="copyValue('list', 'perms', info.perms)">
								<el-option v-for="item in permsList" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</div>
					<el-form-item :label="$t('publicFormLabel.sort')" prop="sort">
						<el-input v-model="info.sort" min="0" type="number" :placeholder="$t('placeholderTip.enter')"
							@change="copyValue('list', 'sort', info.sort)" />
					</el-form-item>
					<el-form-item :label="$t('formLabel.isPlatform')" prop="isPlatform">
						<el-radio-group v-model="info.isPlatform" @change="copyValue('list', 'isPlatform', info.isPlatform)">
							<el-radio :label=0>{{ $t('publicBtn.no') }}</el-radio>
							<el-radio :label=1>{{ $t('publicBtn.yes') }}</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item :label="$t('publicFormLabel.status')" prop="status">
						<el-radio-group v-model="info.status" @change="copyValue('list', 'status', info.status)">
							<el-radio :label=1>{{ $t('publicBtn.disable') }}</el-radio>
							<el-radio :label=0>{{ $t('publicBtn.enable') }}</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-form>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="outerVisible = false">{{ $t('el.popconfirm.cancelButtonText') }}</el-button>
				<el-button type="primary" v-loading.fullscreen.lock="fullscreenLoading" @click="submitForm()">{{
					$t('el.popconfirm.confirmButtonText') }}</el-button>
			</div>
		</el-dialog>
		<el-dialog width="30%" :title="$t('text.selectMenu')" :visible.sync="innerVisible" append-to-body
			custom-class="add_menu_dialog">
			<el-tree ref="tree" :data="menuTree" check-strictly highlight-current check-on-click-node show-checkbox
				:accordion="true" :props="defaultProps" node-key="id" @check-change="handleCheckChange" />
			<span slot="footer" class="dialog-footer">
				<el-button @click="getMenuCancle">{{ $t('el.popconfirm.cancelButtonText') }}</el-button>
				<el-button type="primary" @click="getSelsectMenu">{{ $t('el.popconfirm.confirmButtonText') }}</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
import {
	getSystemMenuInfo,
	getSystemMenuList,
	setSystemMenuDelete,
	setSystemMenuDisable,
	setSystemMenuEnable,
	setSystemMenuSave,
	setSystemMenuUpdate
} from '@/api/system-manager';
import { getTableHeaderList } from '@/api/table-config';
import elTabPane from '@/components/el-tab-pane/index'; //语言动态标签页面
import tableConfigDialog from '@/components/table-config-dialog';
export default {
	name: 'MenuManager',
	components: {
		tableConfigDialog,
		elTabPane
	},
	data() {
		return {
			tagId: '',//语言id 默认id 
			isTag: false,
			showTableConfigDialog: false,
			refreshDelay: 200,
			tableLoading: false,
			showSearch: false,
			tableConfigLoading: false,
			tableConfig: [],
			tableSelectedList: [],
			keySortValue: '',
			topIconColor: '#c0c4cc',
			bottomIconColor: '#c0c4cc',
			tableList: [],
			field: '', // 排序字段
			keySortFlag: true,
			name: '', // 菜单名称
			order: '', // 0:正序 1:倒序
			type: 0, // 菜单类型
			outerVisible: false,
			innerVisible: false,
			buttonList: [], // 按钮
			info: {
				list: []
			},
			typeDisabled: false,
			parentName: this.$t('text.firstLevelMenu'),
			rules: {
				name: [
					{
						required: true,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					}
				],
				path: [
					{
						required: true,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					},
					{ validator: this.checkData, trigger: 'blur' }
				],
				component: [
					{
						required: true,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					},
					{ validator: this.checkData, trigger: 'blur' }
				],
				code: [
					{
						required: true,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					},
					{ validator: this.checkData, trigger: 'blur' }
				],
				perms: [
					{
						required: true,
						message: this.$t('placeholderTip.pSelect'),
						trigger: 'change'
					}
				]
			},
			checkbox: [],
			defaultProps: {
				children: 'children',
				label: 'name'
			},
			propUpType: '', // 弹出状态  add  edit
			menuTree: [],
			menuId: '',
			menuName: '',
			menuType: '',
			type: '',
			permsList: this.$t('permsList'),
			fullscreenLoading: false
		}
	},
	computed: {
		languageId() {
			// 固定语种ID  1:中文  2:英文 3:俄文 4:乌语
			return this.$store.getters.languageId
		},
		languageList() {
			return this.$store.getters.languageList.length > 0 ? this.$store.getters.languageList : JSON.parse(localStorage.getItem('languageList'))
		}
	},
	mounted() {
		window._vm = this
		this.buttonList = this.$route.meta.buttonList
		this.bindEvent()
		this.initTableHeader()
	},
	created() {
	},
	destroyed() {
		this.removeEvent()
	},
	methods: {
		// 语言菜单处理
		tagClick(id) {
			if (id !== this.tagId) {
				this.resetForm('info', 2)
				this.tagId = id
			}
		},
		checkData(rule, value, callback) {
			if (value) {
				if (/[\u4E00-\u9FA5]/g.test(value)) {
					callback(new Error(this.$t('text.noInChinese')))
				} else {
					callback()
				}
			}
			callback()
		},
		// 添加菜单
		addMenuList() {
			this.info = { list: [] }
			this.fullscreenLoading = false
			this.resetForm('info', 1)
			this.typeDisabled = false
			this.propUpType = 'add'
			this.parentName = this.$t('text.firstLevelMenu')
			this.outerVisible = true
			this.menuType = ''
			this.menuName = ''
			this.menuId = ''
			this.getMenuList('0') // 上级目录
			this.$nextTick(() => {
				this.info.list = this.setFormData()
			})
			this.tagId = this.languageId
			this.isTag = true
		},
		// 多表单处理
		setFormData() {
			var arr = []
			this.languageList.map(i => {
				var obj = {
					langId: i.id,
					name: '',
					type: '0',
					parentId: 0,
					redirect: '',
					component: '',
					icon: '', // 图标
					isCache: 0, // 是否缓存 0否 1是
					isShow: 0, // 显示根目录 0否 1是
					path: '', // 路由
					perms: '', // 授权标识
					sort: '',
					code: '',
					isPlatform: 0, //0 否 1是
					status: 1
				}
				arr.push(obj)
			})
			return arr
		},
		// 重置表单
		resetForm(vaid, type) {
			// type 1 重置表单 2仅清空校验
			if (this.$refs[vaid] !== undefined) {
				this.$nextTick(() => {
					Promise.all([
						//数组部分的表单，用map返回验证函数的调用
						...this.info.list.map((item, index) => {
							var refs = `info${index}`
							let valiForm = this.$refs?.[refs].validate
								? this.$refs?.[refs]
								: this.$refs?.[refs][0];
							if (type === 1) {
								valiForm.resetFields()
							} else {
								valiForm.clearValidate()
							}
						})
					])
				})

			}
		},
		// 删除
		moreDelete() {
			var list = this.tableSelectedList
			if (list.length < 1) {
				this.$message({
					message: this.$t('text.pSelLeastOneList'),
					type: 'warning'
				})
			} else {
				var newIds = []
				list.filter(item => {
					newIds.push(item.id)
				})
				var ids = newIds.toString()
				this.$confirm(this.$t('delConfirm.isDelete'), this.$t('delConfirm.tip'), {
					confirmButtonText: this.$t('delConfirm.confirmButtonText'),
					cancelButtonText: this.$t('delConfirm.cancelButtonText'),
					type: 'warning'
				}).then(() => {
					setSystemMenuDelete({ ids: ids }).then(res => {
						if (res.code === 200) {
							this.$message({
								message: this.$t('text.delSucceedTip'),
								type: 'success'
							})
							this.getList()
						}
					})
				})
			}
		},
		handleCommand(val, tar) {
			if (val === 'edit') {
				this.propUpType = 'edit'
				this.info = { list: [] }
				this.tagId = this.languageId
				this.resetForm('info', 1)
				this.typeDisabled = true
				this.outerVisible = true
				this.isTag = true
				getSystemMenuInfo(tar.id).then(res => {
					if (res.code === 200) {
						var arr = res.data.t || []
						if (arr.length > 0) {
							this.setInfoData(arr)
						}
					}
				})
			} else if (val === 'status') {
				var status = tar.status
				var getApi = ''
				if (status === 0) {
					getApi = setSystemMenuEnable
				} else {
					getApi = setSystemMenuDisable
				}
				getApi({
					ids: JSON.stringify(tar.id)
				}).then(res => {
					if (res.code === 200) {
						this.$message({
							message: this.$t('text.operationSucceedTip'),
							type: 'success'
						})
						this.getList()
					}
				})
			} else {
				if (
					(tar.type === 0 || tar.type === 1) &&
					tar.children &&
					tar.children.length > 0
				) {
					this.$message({
						message: this.$t('text.delSubmenuTip'),
						type: 'warning'
					})
				} else {
					this.$confirm(this.$t('delConfirm.isDelete'), this.$t('delConfirm.tip'), {
						confirmButtonText: this.$t('delConfirm.confirmButtonText'),
						cancelButtonText: this.$t('delConfirm.cancelButtonText'),
						type: 'warning'
					}).then(() => {
						setSystemMenuDelete({ ids: tar.id }).then(res => {
							if (res.code === 200) {
								this.$message({
									message: this.$t('text.delSucceedTip'),
									type: 'success'
								})
								this.getList()
							}
						})
					})
				}
			}
		},
		// 详情数据处理
		setInfoData(data) {
			var newArr = []
			var arr = JSON.parse(JSON.stringify(data))
			arr.map((i, index) => {
				// 展示数据处理
				i.type = JSON.stringify(i.type)
				// 处理非对语言接口调用一次 数据处理一次
				if (arr.length === (index + 1)) {
					if (i.parentId === 0) {
						this.parentName = this.$t('text.firstLevelMenu')
						i.parentId = 0
					} else {
						this.parentName = i.parentName
					}
					if (Number(i.type) === 2) {
						this.getMenuList('0,1')
					} else {
						this.getMenuList('0')
					}
				}
			})
			var newObj = arr[0]
			this.languageList.map(i => {
				var obj = {
					id: newObj.id,
					langId: i.id,
					name: '', //多语言字段默认为空
					type: newObj.type,
					parentId: newObj.parentId,
					redirect: newObj.redirect,
					component: newObj.component,
					icon: newObj.icon, // 图标
					isCache: newObj.isCache, // 是否缓存 0否 1是
					isShow: newObj.isShow, // 显示根目录 0否 1是
					path: newObj.path, // 路由
					perms: newObj.perms, // 授权标识
					sort: newObj.sort,
					code: newObj.code,
					isPlatform: newObj.isPlatform, //0 否 1是
					status: newObj.status
				}
				newArr.push(obj)
			})
			arr.map(j => {
				// 根据id进行对象替换
				let index = newArr.findIndex(e =>
					e.langId == j.langId
				)
				if (index > -1) {
					newArr[index] = j
				}
			})

			this.info.list = newArr
		},
		// 排序功能
		getkeySort(key, keySort, order) {
			var obj = {
				key: key, //当前key 值
				keySort: keySort, //筛选key值
				order: order, //当前类型 0:正序 1:倒序
				this_keySortValue: this.keySortValue, //当前的筛选key值
				this_topIconColor: this.topIconColor, //定义 正序值
				this_bottomIconColor: this.bottomIconColor, // 倒序值
				this_order: this.order, //定义的类型 0:正序 1:倒序
				this_keySortFlag: this.keySortFlag //data定义 的 keySortFlag
			}
			let data = this.SortData(obj) //调起方法并传值   data 方法返回的值
			if (data) {
				this.keySortValue = data.keySortValue
				this.topIconColor = data.topIconColor
				this.bottomIconColor = data.bottomIconColor
				this.order = data.order
				this.keySortFlag = data.keySortFlag
				this.field = data.field
				this.getList()
			}
		},
		//  展开搜索
		openSearchView() {
			this.showSearch = !this.showSearch
			setTimeout(() => {
				this.refresh()
			}, 200)
		},
		// 清除搜索内容
		cleanSearch() {
			var tag = false
			this.tableConfig.forEach(item => {
				if (item.searchEnable) {
					if (typeof item.value !== 'undefined') {
						if (item.value !== '') {
							item.value = ''
							tag = true
						}
					}
				}
			})
			tag && this.getList()
		},
		tableHeaderDragend(newWidth, oldWidth, column, event) {
			var tar = this.tableConfig.find(item => item.key === column.columnKey)
			this.$nextTick(() => {
				if (tar) {
					if (newWidth < 130) {
						column.width = 130
						tar.width = 130
					} else {
						tar.width = newWidth
					}
				}
			})
		},
		refresh() {
			try {
				setTimeout(() => {
					if (this.$refs['qtable']) {
						this.$nextTick(() => {
							this.$refs.qtable.doLayout()
							this.$refs.qtable.bodyWrapper.scrollTop = 0
						})
					}
				}, this.refreshDelay)
			} catch (error) {
				console.log(error)
			}
		},
		removeEvent() {
			window.removeEventListener('resize', this.refresh)
		},
		bindEvent() {
			window.addEventListener('resize', this.refresh)
		},
		// 关闭弹框
		closeTableConfigDialog() {
			this.showTableConfigDialog = false
		},
		// 表头
		tableConfigChange(tableConfig) {
			if (tableConfig) {
				this.tableConfig = tableConfig
			} else {
				this.initTableHeader()
			}
		},
		setChildren(children, type) {
			// 编辑多个子层级
			children.map(j => {
				this.toggleSelection(j, type)
				if (j.children) {
					this.setChildren(j.children, type)
				}
			})
		},
		// 选中父节点时，子节点一起选中取消
		select(selection, row) {
			const hasSelect = selection.some(el => {
				return row.id === el.id
			})
			if (hasSelect) {
				if (row.children) {
					// 解决子组件没有被勾选到
					this.setChildren(row.children, true)
					this.tableSelectedList = selection
				}
			} else {
				if (row.children) {
					this.setChildren(row.children, false)
				}
			}
		},
		toggleSelection(row, select) {
			if (row) {
				this.$nextTick(() => {
					this.$refs.qtable && this.$refs.qtable.toggleRowSelection(row, select)
				})
			}
		},
		tableCurrentChange(row) {
			this.$refs['qtable'].toggleRowSelection(row)
		},
		tableSelectionChange(selection) {
			this.tableSelectedList = selection
		},
		// 多选
		selectAll(selection) {
			// tableList第一层只要有在selection里面就是全选
			const isSelect = selection.some(el => {
				const tableDataIds = this.tableList.map(j => j.id)
				return tableDataIds.includes(el.id)
			})
			// tableList第一层只要有不在selection里面就是全不选
			const isCancel = !this.tableList.every(el => {
				const selectIds = selection.map(j => j.id)
				return selectIds.includes(el.id)
			})
			if (isSelect) {
				selection.map(el => {
					if (el.children) {
						// 解决子组件没有被勾选到
						this.setChildren(el.children, true)
					}
				})
			}
			if (isCancel) {
				this.tableList.map(el => {
					if (el.children) {
						// 解决子组件没有被勾选到
						this.setChildren(el.children, false)
					}
				})
			}
		},
		// 表头接口
		initTableHeader() {
			getTableHeaderList(10001).then(res => {
				if (res.code === 200) {
					this.tableConfig = this.checkTableHeader(JSON.parse(res.data))
					this.getList()
				}
			})
		},
		checkTableHeader(list) {
			list.forEach(item => {
				if (item.searchEnable) {
					if (item.searchType === 'select') {
						if (
							Object.prototype.toString.call(item.options) === '[object Array]'
						) {
							if (item.options.length) {
								item.optionsForAdd = JSON.parse(JSON.stringify(item.options))
							}
						}
					}
					if (typeof item.value === 'undefined') {
						this.$set(item, 'value', '')
					}
				}
			})
			return list
		},
		// 列表接口
		getList() {
			this.tableLoading = true
			getSystemMenuList()
				.then(res => {
					if (res.code === 200) {
						this.tableList = res.data
						this.refresh()
					}
				})
				.finally(() => {
					this.tableLoading = false
				})
		},
		getradioType(type) {
			this.menuType = ''
			this.menuName = ''
			this.menuId = ''
			this.parentName = this.$t('text.firstLevelMenu')
			if (type === '2') {
				this.getMenuList('0,1')
			} else {
				this.getMenuList('0')
			}
			setTimeout(() => {
				this.$nextTick(() => {
					this.info.list.map(i => {
						i.parentId = 0
						i.type = type
					})
					this.resetForm('info', 2)
				})
			}, 50)
		},
		// 无多语言字段处理
		copyValue(key, key2, value) {
			this.info[key].map(i => {
				i[key2] = value
			})
		},
		// 关闭新增菜单
		closeAddDialog(info) {
			this.$refs['info'].resetFields()
			this.parentName = this.$t('text.firstLevelMenu')
			this.info.list.map(i => {
				i.parentId = 0
			})
		},
		// 菜单列表
		getMenuList(type) {
			getSystemMenuList({
				type: type,
				status: 1
			})
				.then(res => {
					if (res.code === 200) {
						this.menuTree = res.data
					}
				})
				.finally(() => {
					this.tableLoading = false
				})
		},
		handleCheckChange(data, checked, node) {
			// console.log(data)
			if (data.id === this.menuId) {
				this.$refs.tree.setCheckedNodes([])
				this.menuId = ''
				this.menuName = ''
				this.menuType = ''
				return
			}
			if (checked) {
				this.menuId = data.id
				this.menuName = data.name
				this.menuType = data.type
				this.$refs.tree.setCheckedNodes([data])
			}
		},
		getinnerVisible(type) {
			this.type = type
			this.innerVisible = true
		},
		// 选择菜单确定
		getSelsectMenu() {
			var type = Number(this.type)
			if (!this.menuId) {
				this.$message({
					type: 'warning',
					message: this.$t('text.pleaseSelectMenu')
				})
				return
			} else if (this.menuType === 0 && type === 2) {
				// 类型为按钮  不能选择目录 提示
				this.$message({
					type: 'warning',
					message: this.$t('text.pleaseSelectMenu')
				})
				return
			}
			this.innerVisible = false
			this.info.list.map(i => {
				i.parentId = this.menuId
			})
			this.parentName = this.menuName
		},
		// 取消选择菜单目录
		getMenuCancle() {
			this.menuId = ''
			this.menuName = ''
			this.innerVisible = false
		},

		submitForm() {
			Promise.all([
				//非数组部分的表单
				// this.validateForm("info"),
				//数组部分的表单，用map返回验证函数的调用
				...this.info.list.map((item, index) => {
					if (this.tagId === item.langId) {
						// 当前语种 表单校验
						return this.validateForm(`info${index}`)
					}
				})
			]).then((res) => {
				if (res) {
					// 全部表单验证通过
					var arr = JSON.parse(JSON.stringify(this.info.list))
					arr.map(i => {
						// 新建为根目录时是   isShow  1 显示根目录  否 0
						if (Number(i.type) === 0) {
							i.isShow = 1 //
						} else {
							i.isShow = 0
						}
						// 其他字段类型处理
						i.type = Number(i.type)
						i.parentId = Number(i.parentId)
						i.isCache = Number(i.isCache)
						i.isShow = Number(i.isShow)
						i.sort = Number(i.sort)
					})

					this.fullscreenLoading = true
					if (this.propUpType === 'add') {
						setSystemMenuSave({
							t: arr
						})
							.then(res => {
								if (res.code === 200) {
									this.$message({
										showClose: true,
										message: this.$t('text.addSucceedTip'),
										type: 'success'
									})
									this.outerVisible = false
									this.fullscreenLoading = false
									this.getList()
								}
							})
							.catch(err => {
								this.fullscreenLoading = false
							})

					} else {
						setSystemMenuUpdate({
							t: arr
						})
							.then(res => {
								if (res.code === 200) {
									this.$message({
										showClose: true,
										message: this.$t('text.editSucceedTip'),
										type: 'success'
									})
									this.outerVisible = false
									this.fullscreenLoading = false
									this.getList()
								}
							})
							.finally(() => {
								this.tableLoading = false
								this.fullscreenLoading = false
							})
					}
				}
			})
				.catch((err) => {
					console.log(err);
				});
		},
		validateForm(refs) {
			//获取到form表单的dom，如果是对象直接拿到，如果是数组，就拿第一个
			//elementui对循环的form包装成了数组
			let valiForm = this.$refs?.[refs].validate
				? this.$refs?.[refs]
				: this.$refs?.[refs][0];
			return new Promise((resolve, reject) => {
				//在Promise里进行验证，如果通过就resolve()
				valiForm.validate((res) => {
					if (res) {
						resolve(res);
					} else reject();
				});
			});

		},
	}
}
</script>

<style lang="scss" scoped>
.labelInfo {
	height: 100%;
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	overflow: hidden;

	&>.main_content {
		width: 99.9%;
		height: 100%;

		&>.main_content_title {
			margin-bottom: 10px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: left;
		}

		.main_content_con {
			height: calc(100% - 40px);
			width: 100%;
			display: inline-block;

			.el-table {
				::v-deep .el-icon-arrow-right {
					font-weight: 600;
				}

				.disabled {
					pointer-events: none;
				}

				::v-deep th {
					padding: unset;
					background-color: #f2f2f2;

					.header_item {
						height: 39px;

						display: flex;
						justify-content: center;
						align-items: center;
						cursor: pointer;

						&>.keySort {
							width: 23px;
							height: 21px;
							position: relative;
							display: inline-block;

							&>.el-icon-caret-top {
								position: absolute;
								top: 0;
								right: 0;
								left: 0;
								margin: auto;
								cursor: pointer;
							}

							&>.el-icon-caret-bottom {
								position: absolute;
								bottom: 0;
								right: 0;
								left: 0;
								margin: auto;
								cursor: pointer;
							}
						}
					}
				}

				.el-dropdown {
					cursor: pointer;
				}
			}
		}
	}
}
</style>
<style lang="scss" scoped>
::v-deep .add_dialog {
	height: calc(100% - 30vh);
	position: relative;

	.el-dialog__header {
		border-bottom: 1px solid #e4e4e4;
		text-align: left;
	}

	.el-dialog__body {
		height: calc(100% - 125px);

		&>.el-form {
			margin-top: 15px;
			height: calc(100% - 30px);
			overflow: auto;
		}
	}

	.el-dialog__footer {
		border-top: 1px solid #e4e4e4;
		text-align: right;
	}
}

.add_menu_dialog {
	height: calc(100% - 30vh);
	position: relative;

	.el-dialog__header {
		border-bottom: 1px solid #e4e4e4;
		text-align: left;
	}

	.el-dialog__body {
		height: calc(100% - 125px);
		overflow: auto;
	}

	.el-dialog__footer {
		border-top: 1px solid #e4e4e4;
		text-align: right;
	}
}
</style>
